<template>
  <div>
    <el-card shadow="always" :body-style="{ padding: '20px' }">
      <el-form label-width="80px" :inline="true" :disabled="disable">
        <el-form-item label="一级分类">
          <!-- 
          el-select组件
            v-model:双向绑定收集select组件的值
            placeholder：没有选择的时候占位符
            clearable：是否有一键清除按钮
            filterable:Select 组件是否可筛选
            @change:列表被选择的触发事件
          
          el-option组件属性:
            label:当前展示的数据
            value:被收集的数据
         -->
          <el-select
            placeholder="请选择一级分类"
            clearable
            filterable
            v-model="category1Id"
            @change="category1Change"
          >
            <el-option
              v-for="category1 in category1List"
              :key="category1.id"
              :value="category1.id"
              :label="category1.name"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="二级分类">
          <el-select
            placeholder="请选择二级分类"
            clearable
            filterable
            v-model="category2Id"
            @change="category2Change"
          >
            <el-option
              v-for="category2 in category2List"
              :key="category2.id"
              :value="category2.id"
              :label="category2.name"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="三级分类">
          <el-select
            placeholder="请选择三级分类"
            clearable
            filterable
            v-model="category3Id"
          >
            <el-option
              v-for="category3 in category3List"
              :key="category3.id"
              :value="category3.id"
              :label="category3.name"
            >
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>

      <!-- card body -->
    </el-card>
  </div>
</template>

<script lang="ts">
  import { defineComponent } from "vue"

  export default defineComponent({
    name: "Category",
  })
</script>

<script setup lang="ts">
  import useCategoryStore from "@/stores/category"
  import { storeToRefs } from "pinia"

  //获取categoryStore对象
  const categoryStore = useCategoryStore()

  //拿到pinia中的数据
  const {
    category1List,
    category1Id,
    category2List,
    category2Id,
    category3List,
    category3Id,
  } = storeToRefs(categoryStore)

  //接受一个props,决定自己是否被禁用
  const props = defineProps<{
    disable: boolean
  }>()

  //发送一级分类的列表数据请求
  categoryStore.getCategory1List()

  //一级分类改变的事件回调函数
  const category1Change = () => {
    //当修改了一级分类的选项后清空二级和三级的列表及选择
    category2List.value = []
    category2Id.value = ""
    category3List.value = []
    category3Id.value = ""

    //发送二级分类请求
    categoryStore.getCategory2List()
  }

  const category2Change = () => {
    //当修改了二级分类的选项后清空三级的列表及选择
    category3List.value = []
    category3Id.value = ""

    //发送三级分类请求
    categoryStore.getCategory3List()
  }
</script>

<style scoped lang="scss"></style>
